<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><a href="/message/index.page">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item>金蝶报表</el-breadcrumb-item>
                <el-breadcrumb-item>即时库存</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-header>
            <el-row >
                <el-col :xs="10" :sm="10" :md="8" :lg="8" :xl="8">
                    <el-input placeholder="请输入内容" @keyup.enter.native="enterSearch" v-model="keySearch">
                        <el-button slot="append" icon="el-icon-search" @click=search></el-button>
                    </el-input>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-table
                    :data="tableData"
                    style="width: 100%" size="mini" tooltip-effect="dark" border v-loading="loading" height="calc(100vh - 240px)">
                <el-table-column label="序号" align="center" width="50px">
                    <template scope="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span></template>
                    　　</el-table-column>
                <el-table-column prop="materialId" label="材料编码" align="center" :show-overflow-tooltip=true>
                </el-table-column>
                <el-table-column prop="materialName" label="材料名称" align="center" :show-overflow-tooltip=true>
                </el-table-column>
                <el-table-column prop="stockName" label="仓库名称" align="center" :show-overflow-tooltip=true>
                </el-table-column>
                <el-table-column prop="stockUnitName" label="库存主单位" align="center" :show-overflow-tooltip=true>
                </el-table-column>
                <el-table-column prop="fqty" label="库存量（主单位）" align="center" :show-overflow-tooltip=true>
                </el-table-column>
                <el-table-column prop="favbqty" label="可用量（主单位）" align="center" :show-overflow-tooltip=true>
                </el-table-column>
                <el-table-column prop="stockStatusName" label="库存状态" align="center" :show-overflow-tooltip=true>
                </el-table-column>
                <el-table-column prop="stockOrgName" label="库存组织" align="center" :show-overflow-tooltip=true>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :page-sizes="[100, 500, 1000]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="totalRecords">
            </el-pagination>
        </el-main>
    </el-container>
</div>

<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                currentPage: 1, //当前页
                pageSize: 100, //每页总数
                totalRecords: 0, //总条数
                keySearch:'',
                loading: false,
            };
        },
        methods: {
            //回车监听事件获取输入内容
            enterSearch(event) {
                this.currentPage=1;
                this.pageSize=100;
                this.keySearch = event.target.value;
                this.ajaxFunction();
            },
            //点击事件获取输入内容
            search() {
                this.currentPage=1;
                this.pageSize=100;
                this.ajaxFunction();
            },
            //获取列表
            ajaxFunction() {
                this.loading=true;
                var page = this.currentPage;
                var limit = this.pageSize;
                var param = this.keySearch;
                var resultData = {};
                $.ajax({
                    url: '/kingDee/materialInventory/list.json',
                    type: 'get',
                    data: {page: page, size: limit,key: param},
                    dataType: 'json',
                    success:  (result)=> {
                        this.loading=false;
                        if (result.ret) {
                            this.tableData = result.data;
                            this.totalRecords = result.count;
                        }
                    }
                });
            },
            async handleSizeChange(val) {
                this.pageSize = val;
                this.ajaxFunction();
            },
            //
            async handleCurrentChange(val) {
                this.currentPage = val;
                this.ajaxFunction();
            },
        },
        mounted() {
            this.ajaxFunction();
        },
    })
</script>
</body>

</html>